<template>
  <div class="page-container">
    <el-container>
      <!-- 顶部区域 -->
      <el-header class="custom-header" style="height: auto; padding: 20px;">
        <div class="header-content">
          <!-- 图片 -->
          <img :src="show.sourCecoverPicture" class="avatar" />
          <!-- 信息区域 -->
          <div class="header-info">
            <span class="header-title">{{ show.productName }}</span>
            <div class="info-grid" style="margin-top: 10px;">
              <div class="info-row">
                <label>生产批次：</label>
                <span>{{ show.sourceproduction }}</span>
              </div>
              <div class="info-row">
                <label>保质期：</label>
                <span>{{ show.sourceexpirationTime }}天</span>
              </div>
              <div class="info-row">
                <label>生产许可证号：</label>
                <span>{{ show.sourcelicence }}</span>
              </div>
              <div class="info-row">
                <label>生产企业：</label>
                <span>成都泰吃兔食品加工有限公司</span>
              </div>
            </div>
            <!-- 调整间距 -->
            <span style="font-size: 15px; color: black; font-weight: bold; margin-top: 20px; display: block;">
              产品检验报告
            </span>
            <!-- v-model:file-list="fileList"：绑定文件列表，用于显示和管理已上传的文件 -->
            <div>
              <el-upload v-model:file-list="fileList" action="http://localhost:5175/api/Managerment/UploadImages"
                list-type="picture-card" :limit="9" :on-exceed="handleExceed" :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove" :on-success="handleSuccess" :before-upload="beforeUpload">
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <!-- 显示预览图片 -->
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
              </el-dialog>
            </div>
          </div>
        </div>
      </el-header>
      <!-- 分隔线 -->
      <el-header class="divider-header"></el-header>
      <!-- 主体区域 -->
      <el-container>
        <el-main>
          <el-tabs>
            <el-tab-pane label="养殖信息 (5/5)">
              <!-- 养殖信息 -->
              <div class="section">
                <div class="section-header">
                  <h3 class="section-title">养殖信息</h3>
                  <el-button plain @click="farmingShow">
                    设置
                  </el-button>
                </div>
                <div class="info-content" style="width: 600px;">
                  <el-row :gutter="1">
                    <el-col :span="12">
                      <strong>品种:</strong>
                      <span>{{ farmingData.breed }}</span>
                    </el-col>
                    <el-col :span="12">
                      <strong>来源:</strong>
                      <span>{{ farmingData.source }}</span>
                    </el-col>
                    <el-col :span="12">
                      <strong>养殖天数:</strong>
                      <span>{{ farmingData.feeding_days }}天</span>
                    </el-col>
                    <el-col :span="12">
                      <strong>饲料品牌:</strong>
                      <span>{{ farmingData.feed_brand }}</span>
                    </el-col>
                    <el-col :span="12">
                      <strong>饲养负责人:</strong>
                      <span>{{ farmingData.caretaker }}</span>
                    </el-col>
                    <el-col :span="12">
                      <strong>出生日期:</strong>
                      <span v-if="farmingData && farmingData.harvest_date">{{
                        farmingData.harvest_date.substr(0, 10).replace('-', '年').replace('-', '月') + '日' }}</span>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!-- 保健信息 -->
              <div class="section">
                <div class="section-header">
                  <h3 class="section-title">保健信息</h3>
                  <el-button @click="addRecord" plain>
                    新增行
                  </el-button>
                </div>
                <div class="info-content">
                  <el-table :data="healthRecords" style="width: 680px;"
                    :header-cell-style="{ backgroundColor: '#f0f0f0' }">
                    <el-table-column prop="age" label="饲养天数">
                      <template #default="scope">
                        <!-- 如果是编辑状态，显示输入框 -->
                        <el-input v-if="scope.row.editing" v-model="scope.row.age" @blur="validateAge(scope.row)" />
                        <!-- 如果不是编辑状态，显示文本 -->
                        <span v-else>{{ scope.row.age }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="method" label="保健方式">
                      <template #default="scope">
                        <!-- 如果是编辑状态，显示输入框 -->
                        <el-input v-if="scope.row.editing" v-model="scope.row.method"
                          @blur="validateMethod(scope.row)" />
                        <!-- 如果不是编辑状态，显示文本 -->
                        <span v-else>{{ scope.row.method }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="action" label="保健方法">
                      <template #default="scope">
                        <!-- 如果是编辑状态，显示输入框 -->
                        <el-input v-if="scope.row.editing" v-model="scope.row.action"
                          @blur="validateAction(scope.row)" />
                        <!-- 如果不是编辑状态，显示文本 -->
                        <span v-else>{{ scope.row.action }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template #default="scope">
                        <!-- 如果是编辑状态，显示保存和取消按钮 -->
                        <el-button v-if="scope.row.editing" link style="width: 10px;"
                          @click="save(scope.row)">保存</el-button>
                        <el-button v-if="scope.row.editing" link style="width: 40px;"
                          @click="cancel(scope.row)">取消</el-button>
                        <!-- 如果不是编辑状态，显示修改和删除按钮 -->
                        <el-button v-if="!scope.row.editing" link style="width: 10px;"
                          @click="edit(scope.row)">修改</el-button>
                        <el-button v-if="!scope.row.editing" link style="width: 40px;"
                          @click="deleteItem(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

              <!-- 企业信息 -->
              <div class="section">
                <div class="section-header">
                  <h3 class="section-title">企业信息</h3>
                  <el-button plain @click="farmInfoShow">
                    设置
                  </el-button>
                </div>
                <div class="info-content">
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <strong>养殖场:</strong>
                      <span>{{ dataFarmIn.farmName }}</span>
                    </el-col>
                    <el-col :span="10">
                      <strong>负责人:</strong>
                      <span>{{ dataFarmIn.responsiblePerson }}</span>
                    </el-col>
                    <el-col :span="12">
                      <strong>存栏数量:</strong>
                      <span>{{ dataFarmIn.livestockCount }}</span>
                    </el-col>
                  </el-row>
                </div>
              </div>

              <!-- 企业照片 -->
              <div class="section">
                <h3 class="section-title">企业照片</h3>
                <div style="margin-top: 25px;">
                  <el-upload v-model:file-list="fileList1" action="http://localhost:5175/api/Managerment/UploadImages"
                    list-type="picture-card" :limit="9" :on-exceed="handleExceed" :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove" :on-success="handleSuccess1" :before-upload="beforeUpload">
                    <el-icon>
                      <Plus />
                    </el-icon>
                  </el-upload>
                  <el-dialog v-model="dialogVisible">
                    <!-- 显示预览图片 -->
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                  </el-dialog>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="屠宰信息 (5/5)">
              <Slaughterinformation />
            </el-tab-pane>
            <el-tab-pane label="深加工信息 (0/5)">
              <DeepProcessing />
            </el-tab-pane>
          </el-tabs>
        </el-main>
      </el-container>
    </el-container>
  </div>
  <!-- 养殖信息对话框 -->
  <el-dialog v-model="logic.Isno" title="养殖信息" width="500">
    <el-form :model="formData" :rules="rules" ref="farmingForm" label-width="109px" label-position="left"
      style="margin-left: 10px;width: 400px;">
      <!-- 品种 -->
      <el-form-item label="品种：" prop="breed">
        <el-input v-model="formData.breed" autocomplete="off" />
      </el-form-item>

      <!-- 来源 -->
      <el-form-item label="来源：" prop="source">
        <el-input v-model="formData.source" autocomplete="off" />
      </el-form-item>

      <!-- 饲养天数 -->
      <el-form-item label="饲养天数：" prop="feeding_days">
        <el-input v-model.number="formData.feeding_days" type="number" autocomplete="off" />
      </el-form-item>

      <!-- 饲料品牌 -->
      <el-form-item label="饲料品牌：" prop="feed_brand">
        <el-input v-model="formData.feed_brand" autocomplete="off" />
      </el-form-item>

      <!-- 饲养负责人 -->
      <el-form-item label="饲养负责人：" prop="caretaker">
        <el-input v-model="formData.caretaker" autocomplete="off" />
      </el-form-item>

      <!-- 出栏日期 -->
      <el-form-item label="出栏日期：" prop="harvest_date">
        <el-input v-model="formData.harvest_date" type="date" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 企业信息对话框 -->
  <el-dialog v-model="logic.farmInIsno" title="企业信息" width="500" align-center draggable>
    <el-form :model="farmInData" :rules="farmRules" ref="farmInForm" label-width="120px" label-position="left">
      <!-- 养殖场名称 -->
      <el-form-item label="养殖场" prop="farmName">
        <el-input v-model="farmInData.farmName" autocomplete="off" maxlength="30" />
      </el-form-item>

      <!-- 负责人 -->
      <el-form-item label="负责人：" prop="responsiblePerson">
        <el-input v-model="farmInData.responsiblePerson" autocomplete="off" maxlength="30" />
      </el-form-item>

      <!-- 存栏数量 -->
      <el-form-item label="存栏数量：" prop="livestockCount">
        <el-input v-model.number="farmInData.livestockCount" type="number" autocomplete="off" :max="99999" maxlength="5"
          oninput="if(this.value.length > 5) this.value = this.value.slice(0,5)" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="farmsubmitForm">保存</el-button>
        <el-button @click="logic.farmInIsno = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios'
import { useRoute } from 'vue-router'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
const route = useRoute()
import DeepProcessing from '@/components/DeepProcessing.vue'
import Slaughterinformation from '@/components/Slaughterinformation.vue'
const logic = reactive({
  Isno: false,
  farmInIsno: false
})
const farmInData: any = reactive({
  sourceInfoId: 0,
  farmName: "",
  responsiblePerson: "",
  livestockCount: null
})
// 表单验证规则
const farmRules = {
  farmName: [
    { required: true, message: '请填写养殖场名称', trigger: 'blur' },
    { max: 30, message: '最多支持输入30位字符', trigger: 'blur' },
  ],
  responsiblePerson: [
    { required: true, message: '请填写负责人', trigger: 'blur' },
    { max: 30, message: '最多支持输入30位字符', trigger: 'blur' },
  ],
  livestockCount: [
    { required: true, message: '请填写存栏数量', trigger: 'blur' },
    { type: 'number', message: '存栏数量必须为数字', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value > 99999) {
          callback(new Error('存栏数量不能超过99999'));
        } else if (value.toString().length > 5) {
          callback(new Error('最多支持输入5位字符'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    },
  ],
};
// 提交表单
const farmsubmitForm = async () => {
  if (!farmInData.farmName || !farmInData.responsiblePerson || !farmInData.livestockCount) {
    ElMessage.warning('请填写所有必填项'); // 如果有未填写的项，弹出提示
    return;
  }
  farmInData.sourceInfoId = route.query.sourceInfoId;
  axios.post('http://localhost:5175/api/Managerment/FarminfoCream', farmInData).then(res => {
    logic.farmInIsno = false;
    ElMessage.success('保存成功');
    showFarmIn()
  })
}
//企业信息
const farmInfoShow = () => {
  farmInData.sourceInfoId = null,
    farmInData.farmName = dataFarmIn.value.farmName,
    farmInData.responsiblePerson = dataFarmIn.value.responsiblePerson,
    farmInData.livestockCount = dataFarmIn.value.livestockCount
  logic.farmInIsno = true
}
//企业信息的显示
const dataFarmIn = ref<any>({})
const showFarmIn = () => {
  axios.get('http://localhost:5114/api/Managerment/GetfarmInfo', {
    params: {
      sourceInfoId: route.query.sourceInfoId,
    },
  }).then(res => {
    dataFarmIn.value = res.data.data
  })
}
//#region 养殖信息添加
// 养殖信息对话框 
const farmingForm: any = ref(null);
const formData: any = reactive({
  sourceInfoId: 0,
  breed: "",
  source: "",
  feeding_days: null,
  feed_brand: "",
  caretaker: "",
  harvest_date: ""
});
const farmingShow = () => {
  formData.sourceInfoId = farmingData.value.id;
  formData.breed = farmingData.value.breed;
  formData.source = farmingData.value.source;
  formData.feeding_days = farmingData.value.feeding_days;
  formData.feed_brand = farmingData.value.feed_brand;
  formData.caretaker = farmingData.value.caretaker;
  formData.harvest_date = farmingData.value.harvest_date.substr(0, 10);
  logic.Isno = true
}
// 验证规则
const rules = {
  breed: [
    { required: true, message: '品种不能为空', trigger: 'blur' },
    { max: 30, message: '品种最多支持 30 位字符', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '品种只能包含中文或字母', trigger: 'blur' }
  ],
  source: [
    { required: true, message: '来源不能为空', trigger: 'blur' },
    { max: 30, message: '来源最多支持 30 位字符', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '来源只能包含中文或字母', trigger: 'blur' }
  ],
  feeding_days: [
    { required: true, message: '饲养天数不能为空', trigger: 'blur' },
    { type: 'number', message: '饲养天数必须为数字', trigger: 'blur' },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value && value.toString().length > 5) {
          callback(new Error('饲养天数最多支持 5 位数字'));
        } else {
          callback();
        }
      }, trigger: 'blur'
    }
  ],
  feed_brand: [
    { required: true, message: '饲料品牌不能为空', trigger: 'blur' },
    { max: 50, message: '饲料品牌最多支持 50 位字符', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '饲料品牌只能包含中文或字母', trigger: 'blur' }
  ],
  caretaker: [
    { required: true, message: '饲养负责人不能为空', trigger: 'blur' },
    { max: 50, message: '饲养负责人最多支持 50 位字符', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/, message: '饲养负责人只能包含中文或字母', trigger: 'blur' }
  ],
  harvest_date: [
    { required: true, message: '出栏日期不能为空', trigger: 'blur' }
  ]
};

// 保存操作
const submitForm = () => {
  farmingForm.value.validate((valid: any) => {
    if (valid) {
      formData.sourceInfoId = route.query.sourceInfoId;
      axios.post('http://localhost:5175/api/Managerment/FarmingCream', formData).then(res => {
        showFarming()
        logic.Isno = false;
      }).catch(error => {
        console.error("保存失败", error);
      });
    } else {
      console.log("表单验证失败");
      return false;
    }
  });
};
//#endregion

//养殖信息数据对象
const farmingData = ref<any>({})
// 养殖信息显示
const showFarming = () => {
  axios.get('http://localhost:5114/api/Managerment/GetFarming', {
    params: {
      sourceInfoId: route.query.sourceInfoId,
    },
  }).then(res => {
    farmingData.value = res.data.data
  })
}
// 路由和状态声明
const show = ref<any>({})

// 数据获取
const getSource = () => {
  axios.get('http://localhost:5114/api/Managerment/GetSourceInfo', {
    params: {
      pageIndex: 1,
      pageSize: 1,
      sourceInfoId: route.query.sourceInfoId,
    },
  }).then(res => {
    show.value = res.data.data.data[0]
  })
}
//#region 表格添加行的相关代码
// 表格数据
const healthRecords: any = ref([]);

// 新增行
const addRecord = () => {
  healthRecords.value.push({
    age: '', method: '', action: '', editing: true, isNew: true, healthCareInfoId: 0
  });
};

// 修改行
const edit = (row: any) => {
  row.editing = true;
};

// 删除行
const deleteItem = (row: any) => {
  axios.post('http://localhost:5175/api/Managerment/HealthCareInfoDelete', {
    healthCareInfoId: healthRecords.value.filter(record => record.healthCareInfoId == row.healthCareInfoId)[0].healthCareInfoId,
  }).then(res => {
    showRecord()
  });
};
// 验证饲养天数
const validateAge = (row: any) => {
  if (!row.age) {
    ElMessage.warning('请填写饲养天数');
    return false;
  }
  if (!/^\d{1,5}$/.test(row.age)) {
    ElMessage.warning('饲养天数必须为1-5位数字');
    return false;
  }
  return true;
};

// 验证保健方式
const validateMethod = (row: any) => {
  if (!row.method) {
    ElMessage.warning('请填写保健方式');
    return false;
  }
  if (!/^[\u4e00-\u9fa5a-zA-Z]{1,30}$/.test(row.method)) {
    ElMessage.warning('保健方式必须为1-30位中文字符或字母');
    return false;
  }
  return true;
};

// 验证保健方法
const validateAction = (row: any) => {
  if (!row.action) {
    ElMessage.warning('请填写保健方法');
    return false;
  }
  if (!/^[\u4e00-\u9fa5a-zA-Z]{1,30}$/.test(row.action)) {
    ElMessage.warning('保健方法必须为1-30位中文字符或字母');
    return false;
  }
  return true;
};

// 保存行
const save = (row: any) => {
  if (row.isNew) {
    // 验证输入内容
    if (!validateAge(row) || !validateMethod(row) || !validateAction(row)) {
      return;
    }
    axios.post('http://localhost:5175/api/Managerment/HealthCareInfoCream', {
      farmingDetailsId: route.query.sourceInfoId,
      feedingDays: row.age,
      healthCareMethod: row.method,
      healthCareProcedure: row.action,
    }).then(res => {
      if (res.data.codeNew === 200) {
        // 退出编辑状态
        row.editing = false;
        ElMessage.success('保存成功');
        delete row.isNew; // 移除 isNew 标志
      } else {
        ElMessage.error('保存失败');
      }
    });
  }
  else {
    // 验证修改内容
    if (!validateAge(row) || !validateMethod(row) || !validateAction(row)) {
      return;
    }
    axios.post('http://localhost:5175/api/Managerment/HealthCareInfoUpdate', {
      healthCareInfoId: row.healthCareInfoId,
      farmingDetailsId: route.query.sourceInfoId,
      feedingDays: row.age,
      healthCareMethod: row.method,
      healthCareProcedure: row.action,
    }).then(res => {
      if (res.data.codeNew === 200) {
        // 退出编辑状态
        row.editing = false;
        ElMessage.success('保存成功');
        delete row.isNew; // 移除 isNew 标志
      } else {
        ElMessage.error('保存失败');
      }
    });
  }

};
//显示行
const showRecord = () => {
  axios.get('http://localhost:5114/api/Managerment/GetHealthCare', {
    params: {
      farmingDetailsId: route.query.sourceInfoId,
    },
  }).then(res => {
    healthRecords.value = res.data.data.map((item: any) => ({
      age: item.feedingDays,
      method: item.healthCareMethod,
      action: item.healthCareProcedure,
      healthCareInfoId: item.healthCareInfoId,
      editing: false,
    }));
  })
};
// 取消编辑
const cancel = (row: any) => {
  console.log(row.isNew);
  if (row.isNew) {
    if (row.age === '' && row.method === '' && row.action === '') {
      showRecord();
    } else {
      showRecord();
    }
  } else {
    showRecord();
  }
};
//#endregion
//#region 图片的相关代码
// 图片上传相关状态
const fileList = ref<UploadUserFile[]>([])
const fileList1 = ref<UploadUserFile[]>([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const imglist = reactive({
  sourceInfoId: route.query.sourceInfoId,
  primaryCategory: '',
  secondaryCategory: '',
  imageUrl: '',
})
//图片的显示
const getimgset = () => {
  axios.get('http://localhost:5175/api/Managerment/Getimgrep', {
    params: {
      sourceInfoId: route.query.sourceInfoId
    }
  }).then(res => {
    fileList1.value = res.data.data.filter((img: any) => img.primaryCategory == '养殖信息企业照片').map
      ((img: any) => ({
        name: img.primaryCategory,
        url: img.imageUrl,
        status: 'success',
        uid: img.secondaryCategory,
      }))
    fileList.value = res.data.data.filter((img: any) => img.primaryCategory == '兔子').map
      ((img: any) => ({
        name: img.primaryCategory,
        url: img.imageUrl,
        status: 'success',
        uid: img.secondaryCategory,
      }))
  })
}
// 允许的文件类型
const allowedExtensions = ['.jpg', '.jpeg', '.png']
// 文件大小限制（5MB）
const maxFileSize = 5 * 1024 * 1024
// 上传前的验证
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
  // 验证文件类型
  const fileExtension = file.name.split('.').pop()?.toLowerCase() || ''
  if (!allowedExtensions.includes(`.${fileExtension}`)) {
    ElMessage.error('只允许上传图片文件（.jpg, .jpeg, .png）')
    return false
  }

  // 验证文件大小
  if (file.size > maxFileSize) {
    ElMessage.error('文件大小不能超过 5MB')
    return false
  }

  return true
}
// 图片上传相关方法(1)
const handleSuccess: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
  if (fileList.value.length > 9) {
    ElMessage.warning('最多只能上传 9 张照片')
    return
  }
  console.log(response, uploadFile, uploadFiles);
  const latestUid = uploadFiles[uploadFiles.length - 1].uid
  const imageUrl = uploadFile.url || response.url

  imgset('兔子', latestUid.toString(), response.imgbase)
}
// 图片上传相关方法(2)
const handleSuccess1: UploadProps['onSuccess'] = (response, uploadFile, uploadFiles) => {
  if (fileList1.value.length > 9) {
    ElMessage.warning('最多只能上传 9 张照片')
    return
  }

  console.log(response, uploadFile, uploadFiles);
  const latestUid = uploadFiles[uploadFiles.length - 1].uid
  const imageUrl = uploadFile.url || response.url

  imgset('养殖信息企业照片', latestUid.toString(), response.imgbase)
}
//图片的添加
const imgset = (primaryCategory: string, secondaryCategory: string, imageUrl: string) => {
  imglist.primaryCategory = primaryCategory
  imglist.secondaryCategory = secondaryCategory
  imglist.imageUrl = imageUrl

  console.log(imglist);
  axios.post('http://localhost:5175/api/Managerment/Imgrep', imglist).then(res => {
    if (res.data.code === 100) {
      // 处理成功逻辑
    }
  })
}

const handleExceed: UploadProps['onExceed'] = () => {
  ElMessage.warning('最多只能上传 9 张照片')
}
//图片的删除
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile.uid);
  axios.get('http://localhost:5175/api/Managerment/Delimgrep', {
    params: {
      secondaryCategory: uploadFile.uid
    }
  }).then(res => {
    if (res.data.code === 400) {
      getimgset()
    }
  })
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  imglist.imageUrl = uploadFile.url!
  dialogVisible.value = true
}
//#endregion
// 生命周期钩子
onMounted(() => {
  getSource()
  getimgset()
  showFarming()
  showRecord()
  showFarmIn()
})
</script>

<style scoped>
/* 页面容器样式 */
.page-container {
  font-family: Arial, sans-serif;
  background-color: #fafafa;
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
}

/* 顶部区域样式 */
.custom-header {
  background-color: #ffffff;
  padding: 20px;
  display: flex;
  align-items: flex-start;
}

.header-content {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}

.avatar {
  width: 210px;
  height: 210px;
  border-radius: 8px;
  flex-shrink: 0;
}

.header-info {
  flex: 1;
}

/* 产品名称样式 */
.header-title {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 30px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.info-row label {
  font-weight: bold;
  color: #666;
  margin-right: 10px;
}

.info-row span {
  color: #333;
}

/* 分隔线样式 */
.divider-header {
  background-color: #f0f0f0;
  height: 20px;
}

/* 主体区域样式 */
.page-main {
  padding: 20px;
  background-color: #ffffff;
}


.section:last-child {
  border-bottom: none;
}



.info-content {
  padding: 20px;
  background-color: #ffffff;
}

.el-row {
  margin-top: 5px;
  margin-bottom: 1px;
}

.el-col {
  width: 50%;
  display: flex;
  margin-bottom: 15px;
  /* 增加列之间的垂直间距 */
  align-items: center;
}

.el-col strong {
  margin-right: 10px;
  color: #333;
}

.el-col span {
  color: #333;
}

.section {
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;

}

.section-header {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  gap: 10px;
  /* 设置元素之间的间距 */
}



.section-title {
  font-size: 15px;
  font-weight: bold;
  color: #409EFF;
  margin: 0;
  /* 去除默认的 margin */

}
</style>
